<template>
<div style="height:100%">
  <div class="prdlist">
  <el-form ref="form" :model="form" label-width="80px">
  <div style="margin: 15px;">
  <label>账号信息</label>
  </div>
  <div class="account">
    <span>用户名：{{user.username}} </span>&nbsp;&nbsp; &nbsp;&nbsp; <span>用户类型： {{user.roleNames}}</span>
  </div>
  <div style="margin: 15px;">
  <label>个人信息</label>
  </div>
  <div style=" display: flex;
    justify-content: space-between;
    flex-wrap: wrap;"
     v-if="!user.infotag||user.infotag==0||user.infotag==3" 
    >
  <el-form-item label="姓名:">
    <el-input v-model="userinfo.username"></el-input>
  </el-form-item>
   <el-form-item label="电话">
    <el-input v-model="userinfo.phone"></el-input>
  </el-form-item>
  <el-form-item label="身份证号">
    <el-input v-model="userinfo.comment"></el-input>
  </el-form-item>
  </div> 
  <div style=" display: flex;
    justify-content: space-between;
    flex-wrap: wrap;"
     v-if="!user.infotag||user.infotag==0||user.infotag==3" 
    >
    <el-form-item label="所在地区">
<el-cascader
 ref="cc"
      size="large"
      :options="options"
      v-model="userinfo.addrcode"
      @change="handleChange">
    </el-cascader>
  </el-form-item>
   
   </div> 
   <div style=" display: flex;
    justify-content: space-between;
    flex-wrap: wrap;"
     v-if="!user.infotag||user.infotag==0||user.infotag==3" 
    >
  <el-form-item label="银行卡号">
    <el-input v-model="userinfo.card" placeholder="设置个人佣金结算银行卡号（招商银行）"></el-input>
  </el-form-item>
  <el-form-item label="开户银行">
        <el-select v-model="userinfo.banklist" placeholder="结算银行卡开户行名称">
                  <!-- <el-option value="">请选择开户银行</el-option>
                  <el-option value="102">中国工商银行</el-option>
              <el-option value="104">中国银行</el-option> -->
              <el-option value="308" label="招商银行">招商银行</el-option>
              <!-- <el-option value="301">交通银行</el-option>
              <el-option value="307">平安银行</el-option>
              <el-option value="303">中国光大银行</el-option>
              <el-option value="310">上海浦东发展银行</el-option>
              <el-option value="306">广发银行</el-option>
              <el-option value="A01">上海银行</el-option>
              <el-option value="305">中国民生银行</el-option>
              <el-option value="309">兴业银行</el-option>
              <el-option value="314">农村商业银行</el-option>
              <el-option value="304">华夏银行</el-option>
              <el-option value="319">徽商银行</el-option>
              <el-option value="A05">江苏银行</el-option>
              <el-option value="A63">哈尔滨银行</el-option>
              <el-option value="C20">德阳银行</el-option>
              <el-option value="A02">北京银行</el-option>
              <el-option value="C04">东莞银行</el-option>
              <el-option value="A03">宁波银行</el-option>
              <el-option value="B89">广州银行</el-option>
              <el-option value="C45">富滇银行</el-option>
              <el-option value="A07">天津银行</el-option>
              <el-option value="318">渤海银行</el-option>
              <el-option value="C16">重庆银行</el-option>
              <el-option value="A06">杭州银行</el-option>
              <el-option value="A55">吉林银行</el-option>
              <el-option value="C06">广西北部湾银行</el-option>
              <el-option value="A42">大连银行</el-option>
              <el-option value="B65">长沙银行</el-option>
              <el-option value="B65">农村信用联社</el-option>
              <el-option value="D02">乌鲁木齐市商业银行</el-option>
              <el-option value="C36">贵阳银行</el-option>
              <el-option value="A76">南京银行</el-option>
              <el-option value="B53">汉口银行</el-option>
              <el-option value="A86">台州银行</el-option>
              <el-option value="C21">绵阳市商业银行</el-option>
              <el-option value="C21">绵阳市商业银行</el-option>
           <el-option value="D29">龙江银行</el-option>
           <el-option value="A08">河北银行</el-option>
           <el-option value="B10">南昌银行</el-option>
           <el-option value="D28">宁夏银行</el-option>
           <el-option value="B26">烟台银行</el-option>
           <el-option value="C78">兰州银行</el-option>
           <el-option value="316">浙商银行</el-option>
           <el-option value="B36">郑州银行</el-option>
           <el-option value="A47">锦州银行</el-option>
           <el-option value="315">恒丰银行</el-option>
           <el-option value="A48">营口银行</el-option>
           <el-option value="A19">晋商银行</el-option>
           <el-option value="D26">浙江泰隆商业银行</el-option>
           <el-option value="B22">青岛银行</el-option>
           <el-option value="C92">青海银行</el-option>
           <el-option value="B30">威海银行</el-option>
           <el-option value="C18">攀枝花市商业银行</el-option>
           <el-option value="B25">东营银行</el-option>
           <el-option value="D21">日照银行</el-option>
           <el-option value="D03">昆仑银行</el-option>
           <el-option value="B23">齐商银行</el-option>
           <el-option value="A14">张家口市商业银行</el-option>
           <el-option value="B27">潍坊银行</el-option>
           <el-option value="B01">海峡银行</el-option>
           <el-option value="A31">包包典当</el-option>
           <el-option value="B34">临商银行</el-option>
           <el-option value="C07">柳州银行</el-option>
           <el-option value="D22">葫芦岛银行</el-option>
           <el-option value="B28">济宁银行</el-option>
           <el-option value="B02">厦门银行</el-option>
           <el-option value="A11">邯郸银行</el-option>
           <el-option value="B16">赣州银行</el-option>
           <el-option value="A23">晋城银行</el-option>
           <el-option value="B18">上饶银行</el-option>
           <el-option value="B29">泰安市商业银行</el-option>
           <el-option value="A30">内蒙古银行</el-option>
           <el-option value="105">中国建设银行</el-option>
           <el-option value="103">中国农业银行</el-option>
           <el-option value="D25">浙江民泰商业银行</el-option>
           <el-option value="B38">洛阳银行</el-option>
           <el-option value="A81">绍兴银行</el-option>
           <el-option value="A16">沧州银行</el-option>
           <el-option value="B32">德州银行</el-option>
           <el-option value="A80">湖州银行</el-option>
           <el-option value="A49">阜新银行</el-option>
           <el-option value="D30">苏州银行</el-option>
           <el-option value="A78">温州银行</el-option>
           <el-option value="B51">南阳市商业银行</el-option>
           <el-option value="B48">商丘银行</el-option>
           <el-option value="A15">承德银行</el-option>
           <el-option value="A12">邢台银行</el-option>
           <el-option value="B37">开封市商业银行</el-option>
           <el-option value="B46">漯河银行</el-option>
           <el-option value="A39">鄂尔多斯银行</el-option>
           <el-option value="595">韩国新韩银行</el-option>
           <el-option value="596">韩国中小企业银行</el-option>
           <el-option value="597">韩亚银行</el-option>
           <el-option value="591">韩国外换银行</el-option>
           <el-option value="D23">莱商银行</el-option>
           <el-option value="D32">浙江稠州商业银行</el-option>
           <el-option value="798">鄞州银行</el-option> -->
        </el-select>
      </el-form-item>
  <el-form-item label="户名">
    <el-input v-model="userinfo.cardname" placeholder="输入个人佣金结算银行卡户名"></el-input>
  </el-form-item>
  </div> 


<div style=" display: flex;
    justify-content: space-between;
    flex-wrap: wrap;"
     v-if="user.infotag&&(user.infotag==1||user.infotag==2||user.infotag==4)" 
    >
  <el-form-item label="姓名:">
    {{userinfo.username}}
  </el-form-item>
   <el-form-item label="电话">
    {{userinfo.phone}}
  </el-form-item>
  <el-form-item label="身份证号">
    {{userinfo.comment}}
  </el-form-item>
  </div> 
  <div style=" display: flex;
    justify-content: space-between;
    flex-wrap: wrap;"
    v-if="user.infotag&&(user.infotag==1||user.infotag==2||user.infotag==4)" 
    >
    <el-form-item label="所在地区">
<el-cascader
 ref="cc"
      size="large"
      :options="options"
      v-model="userinfo.addrcode"
      disabled>
    </el-cascader>
  </el-form-item>
   
   </div> 
   <div style=" display: flex;
    justify-content: space-between;
    flex-wrap: wrap;"
    v-if="user.infotag&&(user.infotag==1||user.infotag==2||user.infotag==4)" 
    >
  <el-form-item label="银行卡号">
    {{userinfo.card}}
  </el-form-item>
  <el-form-item label="开户银行">
       <el-select disabled v-model="userinfo.banklist" placeholder="结算银行卡开户行名称">
 
              <el-option value="308" label="招商银行">招商银行</el-option>
       </el-select>
  </el-form-item>
     
    
  <el-form-item label="户名">
    {{userinfo.cardname}}
  </el-form-item>
  </div> 



  <div style="text-align:center">
  <el-button v-if="!user.infotag||user.infotag==0||user.infotag==3" @click="saveuserinfo" type="primary">提交审核</el-button>
  </div>
  <div style="text-align:center">
  <el-button v-if="user.infotag&&(user.infotag==1||user.infotag==2)"  @click="postmodifytag" type="primary">联系管理员修改信息</el-button>
  </div>
    <div style="text-align:center">
  <el-button v-if="user.infotag&&(user.infotag==4)"    type="primary">联系管理员修改中</el-button>
  </div>
  <el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <span>您的信息修改申请已经提交。<br/>您可主动联系优保CRM管理员 400-001-0182。</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">关闭</el-button>
  </span>
</el-dialog>
</el-form>

  </div>
</div>


</template>
<script>
import { postmodifytag,getuserinfo,saveuserinfo,getmember,getrecords,getpolicys,getpolicysbycustomeridofjjr} from '@/api/policy'
import { switchCase, isSwitchCase } from '@babel/types';
import { regionData } from 'element-china-area-data'

  export default {
    name:'chakan2',
    data() {
      return {
        dialogVisible: false,
        user:{},
        userinfo:{},
        options: regionData,
        banklist:'',
        selectedOptions: [],
           tableDatapolicy:[],
             tableDatarecord:[],
             policypage:1,
             recordpage:1,
             policysize:100,
             recordsize:100,
        form: {
          name: '极乐空间',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: '',
          buycount:0,
          recordcount:0,
          card:'',
        
        }
      }
    },
    mounted()
    {
     this.user=JSON.parse(localStorage.getItem('user'))
   console.log('user设置成功')
   this.getuserinfo();
    },
    methods: {
      handleClose(){

      },
      handleChange(){

      },
        getuserinfo(id){


       getuserinfo().then(res => {
        if (res.code == 200) {
             this.userinfo=res.result;
             if(this.userinfo.addrcode)
             this.userinfo.addrcode=JSON.parse(this.userinfo.addrcode)
        } 
        else{
          this.$toast(res.message)
        }
      });
    },
         postmodifytag(){

this.$loadingshow();
       postmodifytag().then(res => {
           this.$loadingclose()
        if (res.code == 200) {

           this.user.infotag=4;
            // this.userinfo=dt;
            var userstr=JSON.stringify(this.user)
            localStorage.setItem('user',userstr)
             this.dialogVisible = true
              
        } 
        else{
          this.$toast(res.message)
             this.dialogVisible = true
        }
      });
    },
    saveuserinfo(){
    var dt=JSON.parse(JSON.stringify(this.userinfo));

    dt.addrcode=JSON.stringify(dt.addrcode);

      this.$loadingshow();
   saveuserinfo(dt).then(res => {
     this.$loadingclose();
        if (res.code == 200) {
            this.$toast(res.result)
            this.user.infotag=2;
            // this.userinfo=dt;
            var userstr=JSON.stringify(this.user)
            localStorage.setItem('user',userstr)
              this.getuserinfo();

        } 
        else{
          this.$toast(res.message)
        }
      });
    },
  getpolicys(){

        this.$loadingshow();

       getpolicysbycustomeridofjjr({ page:this.policypage,size:this.policysize,customerid:this.$route.query.id}).then(res => {
         this.$loadingclose();
        if (res.code == 200) {
              this.tableDatapolicy=res.result.list;
              this.form.buycount=res.result.list.length;
              this.tableDatapolicy.forEach(element => {
                 element.createTime= this.getNowFormatDate(  element.begintime);
              });
              document.getElementsByClassName('el-table__body-wrapper')[0].style.height='auto';
            
         } 
        else{
          this.$toast(res.message)
        }
      });
    },
    formatstatusofpolicy(status)
    {
//获取保单统计情况：待支付0，已支付待核保1，已支付已核保待生效（投保成功）2，已生效保障中（保障中）3，已失效（已过保险期限)4 已撤单5 已核保被拒（退款）6 已赔偿或理赔中7 历史保单8 优嘉确认中9
//  if(status==0)
//      return '待支付'
//      else if(status==1)
//        return '已支付待核保'
//             else if(status==2)
//        return '待生效'
//             else if(status==3)
//        return '保障中'
//             else if(status==4)
//        return '已失效'
//             else if(status==5)
//        return '已撤单'
//             else if(status==6)
//        return '核保被拒'
//            else if(status==7)
//        return '理赔中'
//             else if(status==8)
//        return '历史订单'
//           else if(status==9)
//        return '理赔审核中'
      if(status==0)
      return '待支付'
      else  if(status==1)
      return '保障中'
            else  if(status==2)
      return '已逾期'
            else  if(status==3)
      return '已失效'
            else  if(status==4)
      return '已关闭'
            else  if(status==5)
      return '已删除'
            
    },
      formatstatus(status){
//0（资料不全)刚提交 1审核中 2已赔付 3 已被拒 4 旅行机构审核中 5机构审核通过 6 机构审核拒绝 7超管审核通过
     if(status==0)
     return '资料不全'
     else if(status==1)
       return '审核中'
            else if(status==2)
       return '已赔付'
            else if(status==3)
       return '已被拒'
            else if(status==4)
       return '客户公司审核中'
            else if(status==5)
       return '机构审核通过'
            else if(status==6)
       return '机构审核拒绝'
           else if(status==7)
       return '超管审核通过'

    }
,
  getrecords(){

        this.$loadingshow();
       getrecords({ page:this.recordpage,size:this.recordsize,userid:this.$route.query.id}).then(res => {
         this.$loadingclose();
        if (res.code == 200) {
          
              this.tableDatarecord=res.result;
                            this.form.recordcount=res.result.length;
      
          
                  this.tableDatarecord.forEach(element => {
                 element.createtime= this.getNowFormatDate(  element.createtime);
              });
             document.getElementsByClassName('el-table__body-wrapper')[1].style.height='auto';

         } 
        else{
          this.$toast(res.message)
        }
      });
    },













    getNowFormatDate(dt) {
        var date = new Date(dt);
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
    },





      onSubmit() {
        console.log('submit!');
      }
    }
  }
</script>

<style lang="scss" scoped>
.prdlist{
  width:90%;
  height: 100%;
  margin: 2%;
}
.block {
    padding: 30px 0;
    text-align: center;
    width: 50%;
    box-sizing: border-box;
}
.demonstration {
    display: block;
    color: darkorange;
    font-size: 14px;
    margin-bottom: 20px;
}
.el-form-item{
  width:350px;
  margin-right: 50px;
}
.el-cascader{
  width:270px;
}
.account{
  margin-left: 15px;
  font-size: 14px;
  margin-bottom: 40px;
  color: darkgray;
}

/deep/ .el-select {
  width:276px
}
</style>
